//厦门大学计算机专业 | 前华为工程师
//专注《零基础学编程系列》  http://lblbc.cn/blog
//包含：Java | 安卓 | 前端 | Flutter | iOS | 小程序 | 鸿蒙
//公众号：蓝不蓝编程
<template>
    <view class="page-wrapper">
        <view class="info-container" v-for="(item, bindex) in dataList" :key="item.k">
            <switch type="checkbox" @change="changeSelection" :data-index="bindex" :checked="item.checked"></switch>

            <image :src="item.squarePic" class="pic" :data-id="item.goodsId"></image>

            <view class="info-cols">
                <view class="goods-name" :data-id="item.goodsId">{{ item.name }}</view>
                <view class="price-quantity-row">
                    <view class="price">￥{{ item.price / 100 }}</view>
                    <view class="quantity-row">
                        <view class="decrease" @tap="decreaseQuantity" :data-index="bindex">-</view>
                        <view class="split"></view>
                        <view class="quantity">{{ item.quantity }}</view>
                        <view class="split"></view>
                        <view class="increase" @tap="increaseQuantity" :data-index="bindex">+</view>
                    </view>
                </view>
            </view>
        </view>

        <view class="bottom-wrapper">
            <view class="bottom-split"></view>
            <view class="bottom-row" v-if="isLoggedIn">
                <view class="selected-row" :data-id="id">
                    <view>已选 ({{ selectedCartIndexes.length }})</view>
                    <view class="sum-text">总计</view>
                    <view class="price">{{ selectedSum }}</view>
                </view>
                <view :class="'buy-btn ' + (selectedCartIndexes.length > 0 ? 'btn-enabled' : 'btn-disabled')" @tap="gotoConfirmOrder">结算</view>
            </view>
			<view class="bottom-login-row" v-else>
				 <view class="login-tips">登录后查看已加购商品</view>
				 <view class="login-btn" @tap="gotoLoginPage">立即登录</view>
			</view>
        </view>
    </view>
</template>

<script>
import { queryCart, modifyCart } from '@/common/api'
export default {
    data() {
        return {
            dataList: [],
            selectedCartIndexes: [],
            selectedSum: '￥0',
            bindex: 0,
			isLoggedIn: false,
            id: ''
        };
    },
    onShow: function () {
		var token = uni.getStorageSync('token')
		if(token){
			this.isLoggedIn = true
			this.queryData();
		} else {
			this.isLoggedIn = false
			this.dataList = []
			this.selectedCartIndexes = []
		}
    },
    methods: {
        queryData() {
			queryCart().then(resp => {
				if (!resp.data.code) {
					this.dataList = resp.data.data
					this.selectedCartIndexes = []
					this.selectedSum = '￥0'
				}
			})
        },

        increaseQuantity(e) {
            let index = e.currentTarget.dataset['index'];
            let cartItem = this.dataList[index];
            let cartId = cartItem.id;
            let quantity = cartItem.quantity + 1;
            this.callServerToModifyQuantity(cartItem, index, cartId, quantity);
            this.updateSelectionSum();
        },

        decreaseQuantity(e) {
            let index = e.currentTarget.dataset['index'];
            let cartItem = this.dataList[index];
            let cartId = cartItem.id;
            let quantity = cartItem.quantity - 1;
            this.callServerToModifyQuantity(cartItem, index, cartId, quantity);
            this.updateSelectionSum();
        },

        callServerToModifyQuantity(cartItem, index, cartId, quantity) {
            cartItem.quantity = quantity;
            var params = { quantity: quantity };
			modifyCart(cartId, params).then(resp => {
				if (!resp.data.code) {
					if (quantity <= 0) {
					    this.queryData();
					}
				}
			})
        },

        changeSelection(e) {
            let index = e.currentTarget.dataset['index'];
            let isChecked = e.detail.value;

            if (isChecked === true && !this.selectedCartIndexes.includes(index)) {
                this.selectedCartIndexes.push(index);
            } else {
                let pos = this.selectedCartIndexes.indexOf(index);

                if (pos > -1) {
                    this.selectedCartIndexes.splice(pos, 1);
                }
            }
            this.updateSelectionSum();
        },

        updateSelectionSum() {
            var sum = 0;
            let selectedCartIndexes = this.selectedCartIndexes;

            if (selectedCartIndexes != null && typeof selectedCartIndexes != 'undefined') {
                selectedCartIndexes.forEach((elem, index) => {
                    sum += (this.dataList[elem].quantity * this.dataList[elem].price) / 100;
                });
            }

            this.selectedSum = '￥' + sum
        },

        gotoConfirmOrder(e) {
            var cartIds = '';
            let selectedCartIndexes = this.selectedCartIndexes;

            if (selectedCartIndexes != null && typeof selectedCartIndexes != 'undefined') {
                selectedCartIndexes.forEach((elem, index) => {
                    cartIds += this.dataList[elem].id + ',';
                });
            }

            if (cartIds != '') {
                uni.navigateTo({
                    url: '/pages/order/order-confirm-from-cart/order-confirm-from-cart?ids=' + cartIds
                });
            }
        },
		gotoLoginPage(e){
			uni.navigateTo({
			    url: '/pages/login/login'
			});
		}
    }
};
</script>
<style>
page {
    background-color: #f4f4f4;
}

.page-wrapper {
    margin: 0;
    font-size: 28rpx;
    line-height: 1.5;
    color: #333;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
}

.info-container {
    background-color: #fff;
    border-radius: 10rpx;
    margin-top: 40rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.info-cols {
    width: 100%;
    margin-left: 20rpx;
}

.pic {
    width: 200rpx;
    height: 200rpx;
}

.goods-name {
    font-size: 35rpx;
    width: 400rpx;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.price-quantity-row {
    display: flex;
    flex-direction: row;
    margin-top: 20rpx;
}

.quantity-row {
    display: flex;
    flex-direction: row;
    border-radius: 10rem;
    padding-left: 10rpx;
    padding-right: 10rpx;
    border: 1rpx solid #ebebeb;
    align-items: center;
    /* 垂直居中*/
}

.price {
    flex: 1;
    color: #ef3965;
}

.split {
    width: 1rpx;
    height: 100%;
    background-color: #ebebeb;
}

.decrease {
    padding: 5rpx 20rpx;
}

.increase {
    padding: 5rpx 20rpx;
}

.quantity {
    padding-left: 20rpx;
    padding-right: 20rpx;
}

.bottom-wrapper {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 100rpx;
    background-color: white;
}

.bottom-split {
    width: 100%;
    height: 1rpx;
    background-color: #ebebeb;
    margin-bottom: 20rpx;
}

.bottom-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 20rpx;
    align-items: center;
}

.selected-row {
    display: flex;
    flex-direction: row;
    flex: 1;
    margin-left: 50rpx;
}

.sum-text {
    margin-left: 20rpx;
}

.price {
    margin-left: 5rpx;
    color: #ef3965;
}
.buy-btn {
    flex: 1;
    font-size: 35rpx;
    color: #fff;
    border-radius: 2rem;
    padding: 10rpx;
    display: flex;
    justify-content: center;
    margin-right: 50rpx;
}
.bottom-login-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 20rpx;
    align-items: center;
}
.login-tips{
	flex: 1;
	margin-left: 20rpx;
}
.login-btn {
	background-color: #ef3965;
    color: #fff;
    border-radius: 2rem;
    padding: 10rpx 30rpx;
	margin-right: 20rpx;
}
.btn-enabled {
    background-color: #ef3965;
}

.btn-disabled {
    background-color: #cbccd2;
}
</style>
